import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:rabbit_mobile/i18n/strings.g.dart';
import 'package:rabbit_mobile/widget/custom_cache_image_widget/index.dart';
import 'package:shimmer/shimmer.dart';

class HotBrandsWidget extends StatefulWidget {
  final AsyncValue hotBrandsdata;
  const HotBrandsWidget({
    super.key,
    required this.hotBrandsdata,
  });

  @override
  State<HotBrandsWidget> createState() => _HotBrandsWidgetState();
}

class _HotBrandsWidgetState extends State<HotBrandsWidget> {
  @override
  Widget build(BuildContext context) {
    double imgWidth = (MediaQuery.of(context).size.width - 52) / 4;
    return Container(
      margin: const EdgeInsets.only(bottom: 20, left: 10, right: 10),
      padding: const EdgeInsets.all(10),
      width: double.infinity,
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(10),
      ),
      child: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.end,
            children: [
              Text(
                t.hot_brands,
                style: const TextStyle(
                  fontSize: 20,
                  color: Colors.black,
                ),
              ),
              Text(
                "${t.more} >>",
                style: const TextStyle(
                  fontSize: 14,
                  color: Colors.grey,
                ),
              )
            ],
          ),
          const SizedBox(
            height: 8,
          ),
          widget.hotBrandsdata.when(
            data: (data) {
              return AlignedGridView.count(
                crossAxisCount: 4,
                mainAxisSpacing: 8,
                crossAxisSpacing: 18,
                itemCount: 4,
                shrinkWrap: true,
                physics: const NeverScrollableScrollPhysics(),
                itemBuilder: (context, index) {
                  final item = data.hotBrands[index];
                  return Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      CustomCacheImageWidget(
                        imageUrl: item.logo ?? "",
                        width: imgWidth,
                        height: imgWidth,
                      ),
                      const SizedBox(
                        height: 4,
                      ),
                      Text(
                        item.name,
                        style: const TextStyle(
                          fontSize: 14,
                          color: Colors.black,
                        ),
                        maxLines: 1,
                        overflow: TextOverflow.ellipsis,
                      ),
                      const SizedBox(
                        height: 4,
                      ),
                      Text(
                        item.desc,
                        style: const TextStyle(
                          fontSize: 14,
                          color: Colors.black,
                        ),
                        maxLines: 1,
                        overflow: TextOverflow.ellipsis,
                      ),
                    ],
                  );
                },
              );
            },
            error: (error, StackTrace) => const Center(
              child: Center(
                child: Column(
                  children: [
                    Icon(
                      Icons.dangerous,
                      color: Colors.red,
                      size: 30,
                    ),
                    Text(
                      "數據錯誤，請稍後再試",
                      style: TextStyle(fontSize: 16.0),
                    )
                  ],
                ),
              ),
            ),
            loading: () => AlignedGridView.count(
              crossAxisCount: 4,
              crossAxisSpacing: 8,
              mainAxisSpacing: 22,
              itemCount: 4,
              physics: const NeverScrollableScrollPhysics(),
              shrinkWrap: true,
              itemBuilder: (BuildContext context, int index) {
                return Shimmer.fromColors(
                  baseColor: Colors.grey.shade300,
                  highlightColor: Colors.grey.shade400,
                  child: Column(
                    children: [
                      Container(
                        width: 60.0,
                        height: 60.0,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(10.0),
                          color: Colors.teal,
                        ),
                      ),
                      const SizedBox(
                        height: 8,
                      ),
                      Container(
                        width: 60.0,
                        height: 10,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(10.0),
                          color: Colors.teal,
                        ),
                      ),
                      const SizedBox(
                        height: 8,
                      ),
                      Container(
                        width: 60.0,
                        height: 10,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(10.0),
                          color: Colors.teal,
                        ),
                      ),
                    ],
                  ),
                );
              },
            ),
          )
        ],
      ),
    );
  }
}
